<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>员工信息页</title>

	<link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
	<link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
</head>

<body>
	<!-- 主页面开始 -->
	<div class="layui-fluid" id="LAY-component-grid-list">
		<!-- 查询开始 -->
		<div class="layui-row layui-col-space10 demo-list">
			<div class="layui-col-sm12 layui-col-md12 layui-col-lg12">
				<div class="layui-card">
					<div class="layui-card-header">查询</div>
					<div class="layui-card-body" id="search-view">
						<form class="layui-form" action="" id="searchForm">
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">员工姓名</label>
									<div class="layui-input-inline">
										<input type="text" name="empName" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">员工性别</label>
									<div class="layui-input-inline">
										<input type="text" name="empGender" autocomplete="off" class="layui-input">
									</div>
								</div>
							</div>
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">部门编号</label>
									<div class="layui-input-inline">
										<input type="text" name="depId" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">科室编号</label>
									<div class="layui-input-inline">
										<input type="text" name="officeId" autocomplete="off" class="layui-input">
									</div>
								</div>
							</div>
							<div class="layui-inline">
								<label class="layui-form-label"></label>
								<div class="layui-input-inline">
									<button type="submit" class="layui-btn layui-icon layui-icon-search" lay-submit=""
										lay-filter="search">查询</button>
									<button type="reset"
										class="layui-btn layui-btn-warm layui-icon layui-icon-refresh">重置</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
		<!-- 查询结束 -->
		<!-- 表格开始 -->
		<div class="layui-row layui-col-space10 demo-list">
			<div class="layui-col-sm12 layui-col-md12 layui-col-lg12">
				<div class="layui-card">
					<div class="layui-card-header">部门信息</div>
					<div class="layui-card-body">
						<table class="layui-table" id="emp-table" lay-filter="dataTable" lay-skin="line"
							style="text-align: center">

						</table>
					</div>
				</div>
			</div>
		</div>
		<!-- 表格结束 -->
	</div>
	<!-- 主页面结束 -->

	<!-- 添加修改 弹出层开始 -->
	<div style="display: none;" id="addOrEditDiv">
		<form id="dataForm" lay-filter="dataForm" class="layui-form" style="padding: 20px" action="">
			<div class="layui-form-item">
				<div class="layui-block">
					<label class="layui-form-label">员工编号</label>
					<div class="layui-input-block">
						<input type="text" name="empId" placeholder="请输入内容" class="layui-input" readonly>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-block">
					<label class="layui-form-label">员工姓名</label>
					<div class="layui-input-block">
						<input type="text" name="empName" placeholder="请输入内容" class="layui-input" lay-verify="required">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">员工性别</label>
				<div class="layui-input-block">
					<input type="radio" name="empGender" value="男" title="男" checked="">
					<input type="radio" name="empGender" value="女" title="女">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">身份证</label>
				<div class="layui-input-block">
					<input type="text" name="empIdcard" placeholder="请输入内容" class="layui-input" lay-verify="identity">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-block">
					<label class="layui-form-label">部门编号</label>
					<div class="layui-input-block">
					<input type="text" name="depId" placeholder="请输入内容" class="layui-input" lay-verify="required">
						<!-- <select id="addOrEditSelectDep" name="depId" lay-filter="dep-select">
								{{#  layui.each(d.list, function(index, item){ }}
									<option value="{{ item.depId }}">{{item.depName}}</option>
								{{#  }); }}
						</select>  -->
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-block">
					<label class="layui-form-label">科室编号</label>
					<div class="layui-input-block">
						<input type="text" name="empTel" placeholder="请输入内容" class="layui-input" lay-verify="required">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-block">
					<label class="layui-form-label">员工职位编号</label>
					<div class="layui-input-block">
						<input type="text" name="jobId" placeholder="请输入内容" class="layui-input" lay-verify="required">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-block">
					<label class="layui-form-label">入职日期</label>
					<div class="layui-input-block">
						<input type="text" class="layui-input" name="empHiredate" id="empHiredate"
							placeholder="yyyy-MM-dd" lay-verify="required">
					</div>
				</div>
			</div>
			<div class="layui-form-item" align="center">
				<div class="layui-input-block">
					<button class="layui-btn layui-btn-sm layui-icon layui-icon-release" type="submit"
						lay-filter="doSubmit" lay-submit="">保存</button>
					<button class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh "
						type="reset">重置</button>
				</div>
			</div>
		</form>
	</div>
	<!--添加修改 弹出层结束 -->
	<!-- 表格工具条开始 -->
	<div id="table-toolbar" style="display: none" lay-filter="tableToolbar">
		<button type="submit" class="layui-btn layui-icon layui-icon-add-1" lay-event="add">添加</button>
		<button type="reset" class="layui-btn layui-btn-primary" lay-event="batchDelete">批量删除</button>
	</div>
	<!-- 表格工具条结束 -->
	<!-- 行工具开始 -->
	<script type="text/html" id="row-bar">
		<a class="layui-btn layui-btn-xs layui-icon layui-icon-edit" lay-event="edit">编辑</a>
		<a class="layui-btn layui-btn-xs layui-icon layui-icon-edit" lay-event="delete">删除</a>
	</script>
	<!-- 行工具结束 -->

	<!-- select模板开始 -->
	<script id="select" type="text/html">
		{{#  layui.each(d.list, function(index, item){ }}
			<option value="{{ item.depId }}">{{item.depName}}</option>
		{{#  }); }}
	</script>
	<!-- select模板结束 -->

	<script src="../../layuiadmin/layui/layui.js"></script>
	<script>
		layui.config({
			base: '../../../layuiadmin/' //静态资源所在路径
		}).extend({
			index: 'lib/index' //主入口模块
		}).use(["table", "jquery", "form", "layer", "element", "laypage", "laydate"], function () {
			var laytpl = layui.laytpl;
			var $ = layui.$;
			var form = layui.form;
			var element = layui.element;
			var laypage = layui.laypage;
			var table = layui.table;
			var layer = layui.layer;
			var laydate = layui.laydate;

			// 请求部门信息 dep
			var deps = null;
			var getDepAjax = $.post("/getAllDeps", null, function (res) {
				console.log('部门信息', res.data)
				if (res.code == 200) {
					deps = res.data
				} else {
					alert(res.msg)
				}
			})
			// 请求科室信息 office
			var offices = null;
			var getOfficeAjax = $.get('/office/getAllOffices', null, function (res) {
				console.log('科室信息', res.data)
				if (res.code == 200) {
					offices = res.data
				} else {
					alert(res.msg)
				}
			})

			// 请求员工职位 job
			var jobs = null;
			var getJobs = $.get('/job/all', null, function (res) {
				console.log('职位信息', res.data)
				if (res.code == 200) {
					jobs = res.data
				} else {
					alert(res.msg)
				}
			})
			
			/** 
				obj 		需要转换的对象
				data		目标对象的所有兑奖的数组
				fromField	id字段
				toField		名称字段
			*/
			function fieldIdtoName(obj, data, fromField, toField) {
				let findObj = data.find(x => x[fromField] == obj[fromField])
				return findObj != undefined ? findObj[toField] : obj[fromField]
			}

			// 日期选择器
			laydate.render({
				elem: "#empHiredate",
				type: 'datetime'
			})
			

			var tableIns;
			$.when(getDepAjax, getOfficeAjax, getJobs).done(function () {
				// 表格渲染
				tableIns = table.render({
					elem: "#emp-table",
					url: "/findEmps",
					method: "post",
					defaultToolbar: [],
					toolbar: "#table-toolbar",
					page: true,
					even: true,
					limit: 5,
					cols: [
						[{
							type: 'checkbox',
							fixed: 'left'
						}, {
							type : "numbers",
							title : "序号",
							width : 120
						}, {
							field: 'empId',
							title: '员工编号',
							width: 120,
							sort: true
						}, {
							field: 'empName',
							title: '员工姓名',
							width: 100
						}, {
							field: 'empGender',
							title: '员工性别',
							width: 60
						}, {
							field: 'empTel',
							title: '员工电话',
							width: 120
						}, {
							field: 'empIdcard',
							title: '身份证',
							hide: true
						}, {
							field: 'depId',
							title: '部门编号',
							width: 120,
							templet: function (d) {
								return fieldIdtoName(d, deps, "depId", "depName")
							}
						}, {
							field: 'officeId',
							title: '科室编号',
							width: 120,
							templet: function (d) {
								return fieldIdtoName(d, offices, "officeId", "officeName")
							}
						}, {
							field: 'jobId',
							title: '员工职位',
							width: 120,
							templet: function (d) {
								return fieldIdtoName(d, jobs, "jobId", "jobType")
							}
						}, {
							field: 'empHiredate',
							title: '入职日期',
							width: 200
						}, {
							toolbar: "#row-bar",
							title: '操作',
							width: 300
						}]
					],
					parseData: function (res) {
						return {
							"code": res.code == 200 ? 0 : res.code,
							"msg": res.msg,
							"count": res.count,
							"data": res.data
						}
					}
				})
				
				// deps 部门选择框渲染
				var getTpl = select.innerHTML,
					view = document.getElementById('addOrEditSelectDep');
				laytpl(getTpl).render(deps, function (html) {
					console.log("渲染select")
					view.innerHTML = html;
				});

			})

			// 弹出层的索引
			var mainIndex;
			// 添加或修改的url
			var addOrEditUrl;
			/* 监听头部工具栏时间 */
			table.on("toolbar(dataTable)", function (obj) {
				switch (obj.event) {
					case "add":
						layer.msg("添加")
						openAdd()
						break;
					case "batchDelete":
						layer.msg("批量删除")
						batchDelete()
						break;
				}
			})
			/* 打开添加页面 */
			function openAdd() {
				mainIndex = layer.open({
					type: 1,
					title: '添加员工信息',
					maxmin: true,
					content: $("#addOrEditDiv"),
					success: function (index) {
						$("#dataForm")[0].reset();
						console.log($("#dataForm input[name='empId']").removeAttr('readonly'))
						addOrEditUrl = "/addEmp";
						
					}
				});
			}
			// 行中工具条事件
			table.on('tool(dataTable)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

				if (layEvent === 'delete') { //删除
					layer.confirm('真的删除行么', function (index) {
						obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
						layer.close(index);
						//向服务端发送删除指令
						openDelete(data)
					});
				} else if (layEvent === 'edit') { //编辑
					openEdit(data);
				}

			});
			// 行中工具删除
			function openDelete(data) {
				console.log(data)
				$.post("/delEmpInfo", {
					'empId': data.empId
				}, function (res) {
					if (res.code == 200) {
						layer.msg("删除成功")
						tableIns.reload()
					} else {
						layer.msg(res.msg)
						tableIns.reload()
					}
				})
			}
			// 行中工具编辑
			function openEdit(data) {
				console.log('编辑的数据', data)
				mainIndex = layer.open({
					type: 1,
					title: '修改员工信息',
					content: $('#addOrEditDiv'),
					success: function (index) {
						// 表单赋值
						form.val('dataForm', data);
						addOrEditUrl = '/updateEmpInfo';
					}
				})
			}
			//触发弹出层的更新或者添加按钮
			form.on("submit(doSubmit)", function (data) {
				console.log("----添加或更新", data.field)
				$.ajax({
					url: addOrEditUrl,
					//contentType: 'application/json;charset=utf-8',
					type: "post",
					data: data.field,
					success: function (res) {
						layer.msg("success")
						console.log(res)
						//关闭弹出层
						layer.close(mainIndex);
						tableIns.reload()
					}
				});
				return false;
			});
			// 条件查询
			form.on('submit(search)', function (data) {
				// 表格数据重载
				tableIns.reload({
					where: data.field
				})
				return false;
			})

		});
	</script>
</body>

</html>